import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/Ionicons'
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  TouchableOpacity
} from 'react-native'
import { FakeInput } from './Input'


export default class Header extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <View style={ styles.container }>
        {this.props.children}
      </View>
    )
  }
}

export class HomeHeader extends Component {
  render() {
    return (
      <Header>
        <Text style={ styles.brand }>Let's Go</Text>
        <FakeInput placeholder='旅行计划 | 游记 | 目的地' style={ styles.searchInput }></FakeInput>
        <TouchableOpacity activeOpacity={ 1 } style={ styles.addBtnContainer } onPress={ () => this.props.onRightButtonPress() }>
          <Icon name="ios-add" size={ 20 } color='#FFFFFF' style={ styles.addBtn }></Icon>
          <Text style={ styles.addBtnText }>发布</Text>
        </TouchableOpacity>
      </Header>
    )
  }
}

const styles = StyleSheet.create( {
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    height: 35,
    backgroundColor: '#0099FF',
    width: Dimensions.get('window').width
  },
  brand: {
    width: 112,
    fontFamily: 'Rockwell',
    fontWeight: 'bold',
    fontSize: 26,
    lineHeight: 35,
    color: '#FFFFFF',
    paddingTop: 5
  },
  searchInput: {
    height: 35
  },
  addBtnContainer: {
    width: 36,
    flexDirection: 'column',
    alignItems: 'stretch'
  },
  addBtn: {
    paddingLeft: 5
  },
  addBtnText: {
    fontSize: 10,
    color: '#FFFFFF'
  }
} )